<template>
  <div class="home_mz">
    <div class="bg">
      <div class="liulan" :style="{position:myStyle.position,bottom:myStyle.bottom,left:myStyle.left}">
        <a>浏览全部名作收藏作品<i class="el-icon-caret-right"></i></a>
      </div>
    </div>
    <ZY_intrduce></ZY_intrduce>
    <Moni_space></Moni_space>
    <Hualang></Hualang>
  </div>
</template>
<script>
import ZY_intrduce from '@/components/home/home_mz/zy_introduce'
import Moni_space from '@/components/home/home_mz/Moni_space'
import Hualang from '@/components/home/home_mz/hualang'
export default{
  name: '',
  data(){
    return {
      myStyle: {
        position: 'absolute',
        bottom: '60px',
        left: '20%'
      }
    }
  },
  mounted () {
    window.addEventListener('scroll',this.getScroll)
  },
  methods: {
    getScroll () {
      // 页面高度
      var h = document.documentElement.scrollTop;
      if(h >= 50){
        this.myStyle.position = "fixed"
        this.myStyle.bottom = "50%"
        this.myStyle.left = '-20px'
      }else{
        this.myStyle.position = "absolute"
        this.myStyle.bottom = "60px"
        this.myStyle.left = "25%"
      }
    }
  },
  components: {
    ZY_intrduce,
    Moni_space,
    Hualang
  }
}
</script>
<style scoped lang="less">
  .home_mz{
    margin-bottom: 66px;
    .bg{
      width: 100%;
      height: 485px;
      background-image: url(../../assets/img/home/MZSC.jpg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: top center;
      position: relative;
      .liulan{
        width: 50%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
  }
</style>